import CodeMirrorWrapper from "@/components/CodeMirrorWrapper";
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import VisibilityIcon from '@mui/icons-material/Visibility';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import { Box, IconButton, Tooltip, Typography, Button, Stack, Divider, alpha } from "@mui/material";
import { memo } from "react";

/**
 * 结果显示区域组件
 */
const ResultSection = memo(({ result, copyToClipboard }: { result: string, copyToClipboard: () => void }) => {
    const downloadResult = () => {
        const blob = new Blob([result], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'freemarker-result.html';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };

    const previewResult = () => {
        const newWindow = window.open('', '_blank');
        if (newWindow) {
            newWindow.document.write(result);
            newWindow.document.close();
        }
    };

    return (
        <Box>
            <Box sx={{ 
                display: 'flex', 
                justifyContent: 'space-between', 
                alignItems: 'center',
                mb: 3 
            }}>
                <Typography 
                    variant="h6" 
                    sx={{ 
                        fontWeight: 700,
                        display: 'flex',
                        alignItems: 'center',
                        gap: 1
                    }}
                >
                    🎯 生成结果
                </Typography>
                
                <Stack direction="row" spacing={1}>
                    <Tooltip title="预览结果">
                        <IconButton 
                            onClick={previewResult} 
                            size="small"
                            sx={{ 
                                bgcolor: alpha('#2196f3', 0.1),
                                '&:hover': { bgcolor: alpha('#2196f3', 0.2) }
                            }}
                        >
                            <VisibilityIcon fontSize="small" />
                        </IconButton>
                    </Tooltip>
                    <Tooltip title="复制到剪贴板">
                        <IconButton 
                            onClick={copyToClipboard} 
                            size="small"
                            sx={{ 
                                bgcolor: alpha('#4caf50', 0.1),
                                '&:hover': { bgcolor: alpha('#4caf50', 0.2) }
                            }}
                        >
                            <ContentCopyIcon fontSize="small" />
                        </IconButton>
                    </Tooltip>
                    <Tooltip title="下载文件">
                        <IconButton 
                            onClick={downloadResult} 
                            size="small"
                            sx={{ 
                                bgcolor: alpha('#ff9800', 0.1),
                                '&:hover': { bgcolor: alpha('#ff9800', 0.2) }
                            }}
                        >
                            <FileDownloadIcon fontSize="small" />
                        </IconButton>
                    </Tooltip>
                </Stack>
            </Box>

            <Box sx={{
                borderRadius: 2,
                overflow: 'hidden',
                border: '1px solid',
                borderColor: 'divider'
            }}>
                <CodeMirrorWrapper
                    label=""
                    value={result}
                    onChange={() => { }}
                    height="500px"
                    language="html"
                    readOnly
                />
            </Box>

            <Divider sx={{ my: 3 }} />
            
            <Stack direction="row" spacing={2} justifyContent="center">
                <Button
                    variant="outlined"
                    startIcon={<VisibilityIcon />}
                    onClick={previewResult}
                    sx={{ 
                        borderRadius: '20px',
                        textTransform: 'none',
                        fontWeight: 600
                    }}
                >
                    预览结果
                </Button>
                <Button
                    variant="outlined"
                    startIcon={<ContentCopyIcon />}
                    onClick={copyToClipboard}
                    sx={{ 
                        borderRadius: '20px',
                        textTransform: 'none',
                        fontWeight: 600
                    }}
                >
                    复制代码
                </Button>
                <Button
                    variant="outlined"
                    startIcon={<FileDownloadIcon />}
                    onClick={downloadResult}
                    sx={{ 
                        borderRadius: '20px',
                        textTransform: 'none',
                        fontWeight: 600
                    }}
                >
                    下载文件
                </Button>
            </Stack>
        </Box>
    );
});

export default ResultSection;